<template >
    <div>
        <el-dialog :title="isAdd ? '' : '修改会员管理'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="form" ref="from1" :rules="rules">
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

import { memberinfo, memberedit } from '../../request/api'
import { mapActions } from 'vuex'
export default {
    props: ['isAdd', 'isShow'],
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                uid: '',//会员编号，必填项
                nickname: '',//昵称
                phone: '',//手机号
                password: '',//密码
                status: 1,//状态1正常2禁用
            },
            formLabelWidth: '120px',
            // 验证
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { max: 11, message: '长度在11个字符', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
            }
        }
    },

    methods: {
        ...mapActions({
            getMemberAction: 'member/getMemberAction'
        }),
        // 点击取消
        cancel() {
            this.$emit('cancel', false)

            this.reset()
        },

        // 清空标单
        reset() {
            this.form = {
                nickname: '',//昵称
                phone: '',//手机号
                password: '',//密码
                status: 1,//状态1正常2禁用
            };

            // 重置表单  ，和 去除验证
            this.$refs.from1.resetFields()
        },

        // 数据回显
        lookup(uid) {
            memberinfo({ uid }).then(res => {
                if (res.code == 200) {
                    this.form = res.list
                    this.form.uid = uid
                }
            })
        },

        // 

        // 确认
        confirm() {
            this.$refs.from1.validate((val) => {
                if (val) {
                    if (this.isAdd) {

                    } else {
                        memberedit(this.form).then(res => {
                            if (res.code == 200) {
                                this.cancel()
                                this.getMemberAction()
                                this.$message.success(res.msg)
                            } else {
                                this.$message.success(res.msg)
                            }
                        })
                    }
                }
            })
        }
    },
}
</script>
<style lang="">
    
</style>